<template>
  <h2 @click="plusCount">Welcome to Pinia Space</h2>
  <el-button @click="batchChange">Batch Change</el-button>

  <el-input placeholder="ref name" v-model="name"></el-input>
  <span>{{ name }}</span>
  <span> &nbsp&nbsp{{ counter }}</span>
  <hr>
  <span>Getter: {{mainStore.getAddCounter(10)}}</span>
  <hr>
  <span>Getter2: {{mainStore.getAddCounter2}}</span>


</template>

<script setup lang="ts">
import { useMainStore } from "@/store";
import {ref} from "vue";
import {storeToRefs} from "pinia";

const mainStore = useMainStore();

// const name = ref(mainStore.name);
// const counter = ref(mainStore.counter);
const { counter, name, isAdmin} = storeToRefs(mainStore);

function plusCount() {
  counter.value = ++counter.value;
  console.log(counter.value);
}
function batchChange() {
  mainStore.$patch({
    name: "买房买车",
    counter: 20000,
    /*
    Also can use $state to replace entire state
    PigTutorial: https://juejin.cn/post/7112691686085492767#heading-11
    OfficialWebsite: https://pinia.vuejs.org/core-concepts/state.html#subscribing-to-the-state
    */
  })
}


</script>

<style scoped>
</style>
